import { useState } from "react";
import QuestionCard from "../../components/QuestionCard";
import styles from "./common.module.scss";
import { useSearchParams } from "react-router-dom";
import { useTitle } from "ahooks";
import Title from "antd/es/typography/Title";
import { Empty, Pagination, Spin } from "antd";
import ListSearch from "../../components/ListSearch";
import useLoadQuestionListData from "../../hooks/useLoadQuestionListData";
import ListPage from "./List";
import ListPagination from "../../components/ListPage";

export default function Star() {
  // const [searchParams] = useSearchParams();
  // console.log("searchParams", searchParams.get("keyword"));
  useTitle("问卷-星标问卷");

  const { data = {}, loading } = useLoadQuestionListData({ isStar: true });
  const { list = [], total = 0 } = data;
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: "center" }}>
            <Spin />
          </div>
        )}

        {!loading && list.length == 0 && <Empty description="暂无数据" />}
        {list.length > 0 &&
          list.map((question: any) => (
            <QuestionCard key={question._id} {...question} />
          ))}
      </div>
      <div className={styles.footerF}>
        <ListPagination total={total} />
      </div>
    </>
  );
}
